<template>
  <div class="evaluation-task">
    <div class="left">
      <left-vue></left-vue>
    </div>
    <div class="main">
      <common-tit-vue title="测评任务流程"></common-tit-vue>
      <!-- img list -->
      <div class="imgBox">
        <div class="item" v-for="(item, index) in checkList" :key="index" @click="checkListFlag = index">
          <div class="item-item">
            <div class="img">
              <img :src="index == checkListFlag ? item.srcImg2 : item.srcImg" alt="" />
            </div>
            <div class="num">
              <div>{{ item.num }}个</div>
              <div class="name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <common-tit-vue title="测评任务详情" class="common"></common-tit-vue>
      <!-- 底部 -->
      <div class="footer" v-if="checkListFlag == 0">
        <!-- input框 -->
        <div class="ipt-comm">
          <div class="ipt">
            <el-input v-model="input" placeholder="请输入内容" style="width: 280px" clearable></el-input>
            <el-button type="primary" @click="clickSearch">查询</el-button>
          </div>
          <div class="cityBox">
            <span>排序</span>
            <span class="imgBJ">
              <img src="../../assets/evaluationTask/img/paixu.png" alt="" />
            </span>
            <span>
              <el-radio-group v-model="radio1">
                <el-radio-button label="地区"></el-radio-button>
                <el-radio-button label="单位"></el-radio-button>
              </el-radio-group>
            </span>
          </div>
        </div>

        <!-- table 表格 -->
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号" style="width: 50px"> </el-table-column>
          <el-table-column prop="city" label="地区"> </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <!-- <el-table-column prop="address" label="地址"> </el-table-column> -->
          <el-table-column prop="num" label="完成率">
            <template slot-scope="scope">
              <div class="progress">
                <div class="progress-item">
                  <el-progress
                    type="line"
                    :percentage="scope.row.num"
                    :color="color"
                    :text-inside="true"
                    :stroke-width="18"
                  ></el-progress>
                </div>
                <div>{{ scope.row.num }} %</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="fenye">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <div class="footer" v-if="checkListFlag == 1">
        <myTable></myTable>
      </div>
      <div class="footer" v-if="checkListFlag == 2">
        <progress-list-vue></progress-list-vue>
      </div>
      <div class="footer" v-if="checkListFlag == 3">
        <div class="footer-img">
          <div class="img1">
            <h2>问卷测评依据</h2>
            <span>
              问卷共100道题目，测评者根据自己的情况选择答案，然后按照积分标准等级分数，用以测量人格结构的压力情况、工作情绪状况、疲惫状态、强迫症状况和人际关系状况。
            </span>
          </div>
          <div class="img2">
            <h2>人脸识别测评依据</h2>

            <div>人脸识别模型公式:y=(x^2+1)*(x-1)^2</div>
            <div>(y代表xxxx,x代表xxxxxxxxxxxx)</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import progressListVue from '../../components/progressList/progressList.vue';
import commonTitVue from './components/commonTit.vue';
import leftVue from './components/left.vue';
import myTable from './components/myTable.vue';
export default {
  components: {
    commonTitVue,
    leftVue,
    myTable,
    progressListVue,
  },
  data() {
    return {
      input: '',
      color: '',
      currentPage: 4,
      total: 4,
      radio1: '地区',
      checkListFlag: 0,
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          city: '南京',
          num: 99,
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          city: '南京',
          num: 86,
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          city: '南京',
          num: 60,
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          city: '南京',
          num: 30,
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      checkList: [
        {
          name: '任务派发',
          type: 1,
          num: 12,
          srcImg: require('../../assets/evaluationTask/img/top-1.png'),
          srcImg2: require('../../assets/evaluationTask/img/top-01.png'),
        },
        {
          name: '任务分解',
          type: 2,
          num: 12,
          srcImg: require('../../assets/evaluationTask/img/top-2.png'),
          srcImg2: require('../../assets/evaluationTask/img/top-02.png'),
        },
        {
          name: '测评填写',
          type: 3,
          num: 12,
          srcImg: require('../../assets/evaluationTask/img/top-3.png'),
          srcImg2: require('../../assets/evaluationTask/img/top-03.png'),
        },
        {
          name: '测评报告生成',
          type: 4,
          num: 12,
          srcImg: require('../../assets/evaluationTask/img/top-4.png'),
          srcImg2: require('../../assets/evaluationTask/img/top-04.png'),
        },
      ],
    };
  },
  methods: {
    // 查询
    clickSearch() {
      console.log('查询');
    },
    // 查看
    handleClick() {
      console.log('查看');
    },
    // 分页
    handleSizeChange() {},
    handleCurrentChange() {},
  },
};
</script>
<style lang="scss" scoped src="./evaluationTask.scss"></style>
<style lang="scss" scoped></style>
